<template>
    <div style="width:300px">
        <!-- <m-menu :data="data1"
        name="a" index="b" icon="c" children="d"
        defaultActive="3-1"></m-menu> -->
        <m-infinite-menu :data="data2" name="a" index="b" icon="c" children="d" default-active="3-1-1-1-1"
            active-text-color="red"></m-infinite-menu>
    </div>
</template>

<script lang='ts' setup>
let data1 = [
    {
        a: "导航1",
        b: "1",
        c: "Document"
    },
    {
        a: "导航2",
        b: "2",
        c: "Document"
    },
    {
        a: "导航3",
        b: "3",
        c: "Document",
        d: [
            {
                a: "导航3-1",
                b: "3-1",
                c: "Document",
            }
        ]
    }
]

let data2 = [
    {
        a: "导航1",
        b: "1",
        c: "Document"
    },
    {
        a: "导航2",
        b: "2",
        c: "Document"
    },
    {
        a: "导航3",
        b: "3",
        c: "Document",
        d: [
            {
                a: "导航3-1",
                b: "3-1",
                c: "Document",
                d: [
                    {
                        a: "导航3-1-1",
                        b: "3-1-1",
                        c: "Document",
                        d: [
                            {
                                a: "导航3-1-1-1",
                                b: "3-1-1-1",
                                c: "Document",
                                d: [
                                    {
                                        a: "导航3-1-1-1-1",
                                        b: "3-1-1-1-1",
                                        c: "Document",
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]
</script>

<style lang='scss' scoped></style>